<script setup>
import { ref, onMounted } from 'vue'
import courseApi from '../api/courseApi.js'
import { ElButton } from 'element-plus'
import reserveApi from "../api/reserve.js";
import router from "../router/index.js";

const courses = ref([])

loadCourses()

function loadCourses() {
  courseApi.getLatestCourses().then(resp => {
    courses.value=resp.data
  }).catch(error => {
    console.error('加载课程数据失败:', error)
  })
}
function reserve(id){
  reserveApi.add(id).then(resp=>{
    if (resp.code===200){
      alert("添加成功")
    }else {
      alert(resp.msg)
    }
  }).catch(()=>alert("请求异常"))
}
function info(course){
  router.push({name:'detail',params:{id:course.id}})
}
</script>

<template>
  <div class="course-list">
    <ul class="list clear" style="list-style: none; padding: 0; margin: 0 0 10px;">
      <li v-for="course in courses" :key="course.id" style="margin: 0px 0px 20px 10px; width: calc(100% - 20px); height: 229px; float: left; position: relative; text-align: center; font-size: 0px;">
        <div class="info" style="width: 100%; height: 229px; position: relative; overflow: hidden; border-radius: 15px;">
          <img @click="info(course)" :src="course.photo" class="photo" style="width: 100%; height: 100%;" />
          <div class="course" style="text-align: left; padding: 20px 20px; position: absolute; top: 40%; height: 20%; width: 100%; left: 0px; color: #FFF; font-size: 20px; font-weight: bold; background-image: linear-gradient(90deg, #0008, #0000 60%, #0000);">
            {{ course.name }}
          </div>
          <div class="coach" style="position: absolute; left: 20px; top: 65%; color: #FFF; font-size: 12px; font-weight: bold; text-shadow: 0px 0px 5px #000;">
            {{ course.coach.name }}
          </div>
          <div class="time" style="position: absolute; bottom: 20px; left: 10px; color: #FFF; font-size: 12px; text-shadow: 0px 0px 5px #000;">
            {{ course.time }}
          </div>
          <el-button @click="reserve(course.id)" class="btn-reserve" style="position: absolute; right: 20px; bottom: 10px; border-radius: 15px; background-color: #FFF; color: #393939; font-size: 12px; padding: 5px 15px; margin: 10px 5px;" size="small">
            预约
          </el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.clear::after {
  content: '';
  display: block;
  clear: both;
}
</style>
